<template>
  <div class="lists">
    

    <div class="goods">
      <img class="bg" src="../../../assets/images/bg-white.jpeg" alt="">
      <div class="title">
        <p class="kinds">轴体</p>
        <p @click="goMore('switchs')" class="more">更多 <i class="iconfont gengduo icon-more"></i></p>
      </div>
      <div class="goods-lists">
        <Item v-for="item of switchs" :key="item._id" :item="item"/>
      </div>
    </div>

    <div class="goods">
      <img class="bg" src="../../../assets/images/bg-box.jpg" alt="">
      <div class="title">
        <p class="kinds">套件</p>
        <p @click="goMore('box')" class="more">更多 <i class="iconfont gengduo icon-more"></i></p>
      </div>
      <div class="goods-lists">
        <Item v-for="item of box" :key="item._id" :item="item"/>
      </div>
    </div>

    <div class="goods">
      <img class="bg" src="../../../assets/images/bg-gmk.jpg" alt="">
      <div class="title">
        <p class="kinds">键帽</p>
        <p @click="goMore('gmk')" class="more">更多 <i class="iconfont gengduo icon-more"></i></p>
      </div>
      <div class="goods-lists">
        <Item v-for="item of gmk" :key="item._id" :item="item"/>
      </div>
    </div>
    
  </div>
</template>

<script>
import Item from '../../../components/Item.vue'
import KeyboardHttp from '../../../models/KeyboardHttp.js'

export default {
  components:{
    Item
  },
  data() {
    return {
      switchs:[],
      box:[],
      gmk:[]
    }
  },
  methods:{
    
  },
  async mounted(){
    var switchs = await KeyboardHttp.getSwitchs()
    this.switchs = switchs.data.res.slice(0,8)
    var box = await KeyboardHttp.getBox()
    this.box = box.data.res.slice(0,8)
    var gmk = await KeyboardHttp.getGmk()
    this.gmk = gmk.data.res.slice(0,8)
  }
}
</script>

<style scoped>
  .lists{
    color: #333;
    overflow: hidden;
  }
  .goods{
    /* margin-top: 80px; */
  }
  .title{
    font-size: 28px;
    overflow: hidden;
    margin: 10px 0 30px 0;
  }
  .kinds{
    float: left;
  }
  .more{
    float: right;
    cursor: pointer;
  }
  .gengduo{
    font-size: 30px;
    vertical-align: middle;
    font-weight: 800;
  }
  .goods-lists{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 40px;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 40px;
  }
  .bg{
    height: 150px;
    width: 100%;
    object-fit: cover;
  }
</style>